<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            事件绑定
         -->
        <button v-on:click="show()">按钮1</button>
        <!-- 方法没有参数时可以省略小括号 -->
        <button v-on:click="show">按钮2</button>
        <!-- 可以使用@代替v-on: -->
        <button @click="show">按钮3</button>
        <hr>

        <!-- 
            绑定多个事件
         -->
        <button @mouseover="show()" @mouseout="print()">绑定多个事件：方式1</button>
        <!-- 此时无法使用@，只能使用v-on，且方法后不能添加小括号 -->
        <button v-on="{mouseover:show,mouseout:print}">绑定多个事件：方式2</button>
        <hr>

        <!-- 
            同一事件绑定多个方法
                1.此时不能省略方法后面的小括号
                2.执行的先后顺序取决于绑定时方法的先后顺序
         -->
        <button @click="show(),print()">绑定多个方法：方式1</button> 
        <button @click="[print(),show()]">绑定多个方法：方式2</button> 
        <hr>

        <!-- 
            行内表达式
         -->
        <p>{{msg}}</p>
        <button @click="setMsg()">修改msg的值：方式1</button>
        <button @click="msg='alice'">修改msg的值：方式2</button>
        <hr>

        <!-- 
            事件绑定时方法的参数
         -->
         <!-- 将普通值作为实参 -->
        <button @click="write('aaa')">传参1</button>
        <!-- 将数据仓库中的变量作为实参 -->
        <button @click="write(msg)">传参2</button>
        <!-- 将this作为实参，此时的this指向window对象，与原生js有所不同 -->
        <button @click="write(this)">传参3</button>
        <!-- 将$event作为实参，表示事件对象，包含事件相关的信息，等同于原生js中的event -->
        <button @click="write($event)">传参4</button>
        <input type="text" @input="write($event.target.value)">
        <hr>

        <!-- 
            动态事件缩写 (2.6.0+)：使用[]表示变量
         -->
        <button @[event]="show">动态事件绑定</button> 
        <button @click="event='mouseout'">改变事件</button>
    </div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'tom',
            event:'mouseover'
        },
        methods:{ // 定义方法，方法仓库
            show:function(){
                console.log('show方法');
            },
            print(){ // ES6提供的简写方式：当对象的属性值为匿名函数时可以简写为  属性名(){}
                console.log('print方法');
            },
            setMsg(){
                // console.log(this); // this表示当前Vue实例
                // Vue中定义的数据和方法在当前Vue实例的根据属性上
                this.msg='alice';
                // this.show();
            },
            write(args){
                console.log(args);
                // console.log(args.target.value);
            }
        }
    });
    console.log(vm);
</script>
</html>